<template>
  <div style="width: 100%">
    <div>
      <div class="content-box">
        <div class="container">
          <div style="border: 1px solid #ccc; margin-top: 10px; text-align: left">
            <!-- 工具栏 -->
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
            <!-- 编辑器 -->
            <Editor :style="`height: ${isDesigner ? '300px' : '500px'}; overflow-y: auto`" :defaultConfig="editorConfig" v-model="localValue" @onChange="onChange" @onCreated="onCreated" @onFocus="handleFocus" />
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-else style="margin-top: 10px">
      <div v-html="html" readonly style="width: 100%; height: 200px; outline: none"></div>
    </div> -->
  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import kityformula from '@/utils/kityformula'
import { Boot } from '@wangeditor/editor'
import formulaModule from '@wangeditor/plugin-formula'
export default {
  name: 'input',
  components: { Editor, Toolbar },
  props: {
    value: '',
    mode: {
      default: 'edit' // 编辑模式和 edit， 展示模式 view
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        // 插入编辑公式菜单
        insertKeys: {
          index: 0,
          keys: [
            'kityFormula' // “编辑公式”菜单
          ]
        }
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: '请输入内容...',
        // autoFocus: false,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {}
      }
    }
  },
  computed: {
    localValue: {
      get() {
        if (this.value) {
          return JSON.parse(this.value)
        } else {
          return ''
        }
      },
      set(val) {
        console.log(val,'===val')
        let tempVal = val
        if (val == '<p><br></p>') {
          tempVal = undefined
        }
        this.$emit('input', JSON.stringify(tempVal))
      }
    },
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === 'edit'
    }
  },
  created() {
    Boot.registerMenu(kityformula)
    Boot.registerModule(formulaModule)
  },
  mounted() {
    // console.log(this.$attrs,'ext-input-mounted')
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   console.log(this.value,'===this.value')
    //   console.log(JSON.parse(this.value),'===value')
    //   // const parser = new DOMParser();
    //   // const val = parser.parseFromString(this.value, 'text/html')
    //   // console.log(eval(this.value),'===this.value')
    //   // const aa = '<p>1212</p><p><span data-w-e-type=\"formula\" data-w-e-is-void data-w-e-is-inline data-value=\"\\frac{-b\\pm\\sqrt{{b}^{2}-4ac}}{2a}\"></span></p>'
    //   // console.log(aa)
    //   this.html = JSON.parse(this.value)
    // }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
    },
    getEditorText() {
      const editor = this.editor
      if (editor == null) return

      console.log(editor.getText()) // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.editor
      if (editor == null) return

      console.log(editor.getHtml()) // 执行 editor API
    }
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>

</style>